四、Node关系---修改操作
4.1 createTextNode()：创建文本节点
document.createTextNode(text)
参数：文本
返回值：创建的文本标签
注意：这个方法是 document的方法，因为创建元素这么大的事，只能document来干，找某个element来创建不靠谱。
<body>
<div id="div"></div>
<script type="text/javascript">
var textNode = document.createTextNode("我是一个开心的文本！！！"); //创建一个文本节点
alert(textNode.nodeName + "\n" + textNode.nodeValue); // #text 我是一个开心的文本！！！
</script>
</body>
4.2 appendChild() : 给一个元素添加child节点
element.appendChild(node)
参数：必须。表示要添加的节点
返回值：参数对象本身
注意：append的意思是追加。如果元素已经有child，则追加到别的child之后。也就是说新添加的 child 进去之后一定是 lastChild
<body>
<div id="div"></div>
<script type="text/javascript">
var div = document.getElementById("div");
var textNode = document.createTextNode("我是一个开心的文本！！！");
div.appendChild(textNode); //把刚才创建的文本添加到div标签中。
</script>
</body>
4.3 createElement(nodename): 创建元素节点
document.createElement(nodename)
参数：必须。要创建的元素的名称
返回：创建的元素节点
<body>
<div id="div"></div>
<script type="text/javascript">
var div = document.getElementById("div");
var newElement = document.createElement("a"); //创建一个a标签
var textNode = document.createTextNode("首页"); // 创建一个文本节点
newElement.appendChild(textNode); //把 文本节点添加到a标签中
var v = div.appendChild(newElement); // 把刚刚创建的a标签，添加为div标签的子标签
alert(v === newElement) // true 证明参数和返回值确实为同一个对象
</script>
</body>
4.4 insertBefore() : 在一个节点前插入新节点
node.insertBefore(newnode,existingnode)
参数1：要插入的新节点
参数2：目标节点。会把参数1节点插入这个节点之前。
<body>
<ul id="language">
<li>java</li>
<li>c++</li>
</ul>
<button onclick="myFunction()">点我在java前插入JavaScript</button>
<script>
function myFunction() {
var newItem = document.createElement("li")
var textnode = document.createTextNode("JavaScript")
newItem.appendChild(textnode)
var languageList = document.getElementById("language")
//把newItem添加到languageList的第1个子节点之前
languageList.insertBefore(newItem, list.firstChild);
}
</script>
</body>
4.5 removeChild(): 移除子节点
node.removeChild(node)
参数：必须。要移除的那个子节点
<body>
<ul id="language">
<li>java</li>
<li>c++</li>
<li>oc</li>
<li>php</li>
<li>c#</li>
<li>JavaScript</li>
</ul>
<button onclick="myFunction()">点我移除第1条语言</button>
<script>
function myFunction() {
var languageList = document.getElementById("language");
//获取到languageList下面的所有的 li 标签
var liList = languageList.getElementsByTagName("li");
// 移除第一个 li 元素。 如果重复调用，则每次都是移除第1个
languageList.removeChild(liList[0]);
alert(liList.length)
}
</script>
</body>
4.6 replaceChild()：替换子节点
node.replaceChild(newnode,oldnode)
参数1：新节点
参数2：旧节点
<body>
<ul id="language">
<li>java</li>
<li>c++</li>
<li>oc</li>
<li>php</li>
<li>c#</li>
<li>JavaScript</li>
</ul>
<button onclick="myFunction()">点我替换第一条语言</button>
<script>
function myFunction() {
var languageList = document.getElementById("language");
var newLi = document.createElement("li");
newLi.innerHTML="JavaScript";
//用新节点去替换旧节点。
languageList.replaceChild(newLi, languageList.childNodes[1]);
}
</script>
</body>
4.7 cloneNode()：克隆节点
node.cloneNode(deep):
cloneNode() 方法可创建指定的节点的精确拷贝。拷贝所有属性和值。
该方法将复制并返回调用它的节点的副本。如果传递给它的参数是true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。
<body>
<ul id="language">
<li>java</li>
<li>c++</li>
<li>oc</li>
<li>php</li>
<li>c#</li>
<li>JavaScript</li>
</ul>
<button onclick="myFunction()">点我clone整个列表</button>
<script>
function myFunction() {
var languageList = document.getElementById("language");
//克隆languageList整个节点，传入true表示深度copy，所有的子节点都copy
var newList = languageList.cloneNode(true);
document.getElementsByTagName("body")[0].appendChild(newList);
}
</script>
</body>